<!-- templates/courses.html -->
<!DOCTYPE html>
<html>
<head>
    <title>商务汉语课程列表</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .course-card {
            transition: transform 0.3s ease;
            border-radius: 12px;
            overflow: hidden;
        }
        .course-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        }
        .pinyin-badge {
            background: linear-gradient(135deg, #6B8DD6 0%, #8E44AD 100%);
            color: white;
        }
    </style>
</head>
<body>
    <div class="container py-5">
        <h1 class="mb-4 text-center">商务汉语课程目录</h1>

        <!-- 课程展示区 -->
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
            {% for course in courses %}
            <div class="col">
                <div class="card h-100 course-card">
                    <!-- 课程图片 -->
                    <img src="{{ url_for('static', filename=course.image_path) }}"
                         class="card-img-top"
                         alt="{{ course.title }}"
                         style="height: 200px; object-fit: cover;">

                    <div class="card-body">
                        <!-- 标题和拼音 -->
                        <h3 class="card-title">{{ course.title }}</h3>
                        <span class="badge pinyin-badge mb-3">{{ course.pinyin }}</span>

                        <!-- 课程描述 -->
                        <p class="card-text text-muted">{{ course.description }}</p>
                    </div>

                    <!-- 底部链接 -->
                    <div class="card-footer bg-white border-0">
                        <a href="{{ course.link }}"
                           class="btn btn-primary w-100"
                           target="_blank">
                           立即学习 →
                        </a>
                    </div>
                </div>
            </div>
            {% else %}
            <div class="col-12">
                <div class="alert alert-warning">当前没有可用课程</div>
            </div>
            {% endfor %}
        </div>
    </div>
</body>
</html>